<template>
  <div>
    <div style="margin: 2% 0; display: inline-block">
      <div style="position: relative; display: inline-block">
        <el-input
          style="width: 200px"
          @keydown.enter.native="zfbselect"
          placeholder="请输入支付宝号查询"
          v-model="zhifubao"
        ></el-input
        >&nbsp;&nbsp;
        <span
          @click="zfbselect"
          style="position: absolute; right: 18px; top: 8px"
          ><icon-svg name="shousuo" class="site-sidebar__menu-icon"></icon-svg
        ></span>
      </div>
    </div>
    <div style="display: inline-block">
      <el-button
        style="margin: 0 0 20px 20px"
        size="mini"
        type="primary"
        icon="document"
        @click="transferClcik()"
        :disabled="checkBoxData.length <= 0 || !isAuth('financeList:accounts')"
        >批量转账
      </el-button>
      <!-- <el-button style='margin:0 0 20px 20px;' :disabled="!isAuth('financeList:statement')" size="mini" type="primary"
                icon="document" @click="close()">开始结算
     </el-button> -->
      <el-button
        style="margin-left: 15px"
        size="mini"
        type="primary"
        icon="document"
        @click="cleans"
        >重置</el-button
      >
    </div>
    <el-table
      @selection-change="changeFun"
      v-loading="tableDataLoading"
      :data="tableData"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column fixed prop="id" label="编号" width="80">
      </el-table-column>
      <el-table-column fixed prop="relationId" label="用户等级" width="120">
        <template slot-scope="scope">
          <span
            style="color: #4f9dec; cursor: pointer"
            @click="updates(scope.row)"
            >{{ scope.row.relationId }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="zhifubao" label="支付宝" width="150">
      </el-table-column>
      <el-table-column prop="zhifubaoName" label="姓名" width="100">
      </el-table-column>
      <el-table-column prop="money" label="提现金额" width="100">
      </el-table-column>
      <el-table-column prop="state" label="状态" width="100">
        <template slot-scope="scope">
          <span
            style="color: #4f9dec; cursor: pointer"
            v-if="scope.row.state == 0"
            >待转账</span
          >
          <span v-if="scope.row.state == 1">已转账</span>
          <span v-if="scope.row.state == -1">已退款</span>
        </template>
      </el-table-column>
      <el-table-column prop="refund" label="退款原因" width="220">
      </el-table-column>
      <!-- <el-table-column
      prop="refund"
      label="类型"
      width="100">
    </el-table-column> -->
      <el-table-column prop="createAt" label="申请时间" width="170">
      </el-table-column>
      <el-table-column prop="outAt" label="转账/退款时间" width="180">
      </el-table-column>
      <el-table-column prop="orderNumber" label="转账订单号" width="150">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="280">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            :disabled="!isAuth('financeList:accounts')"
            @click="batch(scope.row)"
            >支付宝转账
          </el-button>
          <el-button
            v-if="scope.row.paymentCode"
            size="mini"
            type="primary"
            :disabled="!isAuth('financeList:accounts')"
            @click="batchWechat(scope.row)"
            >微信转账
          </el-button>
          <el-button
            size="mini"
            type="primary"
            :disabled="!isAuth('financeList:refund')"
            @click="refund(scope.row)"
            >退款
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center; margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 15]"
        :page-size="size"
        :current-page="page"
        layout="total,sizes, prev, pager, next"
        :total="totalnum"
      >
      </el-pagination>
    </div>
    <!-- 微信转账弹窗 -->
    <we-pay-dialog
      ref="wepayDialogRef"
      @confirm="confirmBatchWechat(batchWechatDialogData.cashId)"
      :wepayQRCodeImgSrc="batchWechatDialogData.paymentCode"
      :confirmAutoClose="false"
    >
    </we-pay-dialog>
    <!-- 退款弹框 -->
    <el-dialog title="退款" :visible.sync="dialogFormVisible" center>
      <el-form :model="form">
        <el-form-item label="退款原因：" :label-width="formLabelWidth">
          <el-input
            v-model="form.content"
            type="textarea"
            rows="4"
            placeholder="请输入退款原因"
            style="width: 65%"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="refundNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import WePayDialog from "./WePayDialog.vue";
export default {
  name: "BonusWithdrawal",
  components: {
    WePayDialog,
  },
  data() {
    return {
      page: 1,
      size: 5,
      balance: -1,
      zhifubao: "",
      tkstatus: -1,
      platform: "all",
      phone: "",
      content: "",
      startTime: "",
      endTime: "",
      cashId: "",
      type: -1,
      totalnum: 0,
      totalnum2: 0,
      sqxTotal: "",
      userId: "",
      userTotal: "",
      taunTotal: "",
      relationId: "",
      sumMoneyByTime: "",
      activeName: "first",
      formLabelWidth: "200px",
      dialogFormVisible: false,
      tableDataLoading: false,
      userPhone: "",
      userPhoneTo: "",
      increaseDate: [],
      statisData: {},
      tableData: [],
      rechargeData: [],
      withdrawData: {},
      checkBoxData: [], //多选框选择的值
      type: 1,
      way: 3,
      form: {
        cashId: "",
        content: "",
      },
      item: "",
      platforms: [
        {
          value: "all",
          label: "全部",
        },
        {
          value: "tb",
          label: "淘宝",
        },
        {
          value: "jd",
          label: "京东",
        },
        {
          value: "pdd",
          label: "拼多多",
        },
      ],
      ways: [
        {
          value: 3,
          label: "按天查询",
        },
        {
          value: 2,
          label: "按月查询",
        },
        {
          value: 1,
          label: "按年查询",
        },
      ],
      batchWechatDialogData: { paymentCode: "" }, // 微信转账弹窗数据
    };
  },
  methods: {
    // 转账(微信)弹窗
    batchWechat(row) {
      const { state, paymentCode, id: cashId } = row;
      if (state == 1) {
        this.$message({
          message: "已转账，请勿重复操作！",
          type: "error",
          duration: 2500,
        });
        return;
      }
      this.batchWechatDialogData = { paymentCode, cashId };
      this.$refs.wepayDialogRef.open();
    },
    // 转账(微信)确认
    confirmBatchWechat(cashId) {
      this.$confirm(`确定转账?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          // /cash/update/{cashId}
          url: this.$http.adornUrl2(`/cash/update/${cashId}`),
          method: "post",
          data: this.$http.adornData(cashId, false),
        }).then(({ data }) => {
          if (data.status == 0) {
            this.$message({
              message: data.data,
              type: "success",
              duration: 1500,
              onClose: () => {
                this.$refs.wepayDialogRef.close();
                this.dataSelect();
              },
            });
            return;
          } else {
            this.$message({
              message: data.msg,
              type: "error",
              duration: 2500,
              onClose: () => {
                this.$refs.wepayDialogRef.close();
              },
            });
            return;
          }
        });
      });
    },
    // 退款操作
    refundNoticeTo() {
      if (this.form.content == "") {
        this.$message({
          message: "请输入退款原因！",
          type: "error",
          duration: 1500,
        });
        return;
      }
      this.$http({
        url: this.$http.adornUrl2(
          `/cash/v1/awardRefund/${this.form.cashId}/${this.form.content}`
        ),
        method: "post",
        data: this.$http.adornData({}),
      }).then(({ data }) => {
        if (data.status == 0) {
          this.dialogFormVisible = false;
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.form.content = "";
              this.dataSelect();
            },
          });
          return;
        }
        if (data.status == -100) {
          this.dialogFormVisible = false;
          this.$message({
            message: data.msg,
            type: "error",
            duration: 2500,
            onClose: () => {
              this.form.content = "";
            },
          });
          return;
        }
      });
    },
    //转账
    batch(row) {
      let cashId = row.id;
      if (row.state == 1) {
        this.$message({
          message: "已转账，请勿重复操作！",
          type: "error",
          duration: 2500,
        });
        return;
      }
      this.$confirm(`确定转账?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          // /cash/alipay/{cashId}
          url: this.$http.adornUrl2(`/cash/alipay/${cashId}`),
          method: "post",
          data: this.$http.adornData(cashId, false),
        }).then(({ data }) => {
          if (data.status == 0) {
            this.$message({
              message: data.data,
              type: "success",
              duration: 1500,
              onClose: () => {
                this.dataSelect();
              },
            });
            return;
          } else {
            this.$message({
              message: data.msg,
              type: "error",
              duration: 2500,
            });
            return;
          }
        });
      });
    },
    // 微信转账
    batchWepay(row) {
      const { state, paymentCode, id: cashId } = row;
      if (state == 1) {
        this.$message({
          message: "已转账，请勿重复操作！",
          type: "error",
          duration: 2500,
        });
        return;
      }
      this.batchWechatDialogData = { paymentCode, cashId };
      this.$refs.wepayDialogRef.open();
    },
    // 退款
    refund(row) {
      if (row.state == -1) {
        this.$message({
          message: "已退款，请勿重复操作！",
          type: "error",
          duration: 2500,
        });
      } else {
        this.dialogFormVisible = true;
        this.form.cashId = row.id;
      }
    },
    // 会员详情跳转
    updates(row) {
      this.$router.push({ path: "/userDetail", query: { userId: row.userId } });
    },
    // 多选
    changeFun(val) {
      this.checkBoxData = val;
    },
    cleans() {
      this.zhifubao = "";
      this.relationId = "";
      this.dataSelect();
    },
    // 支付宝账号查询
    zfbselect() {
      if (this.zhifubao == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入支付宝账号",
          type: "error",
        });
        return;
      } else {
        this.tableDataLoading = true;
        this.$http({
          url: this.$http.adornUrl2(`/cash/phone/${this.zhifubao}`),
          method: "get",
          params: this.$http.adornParams({}),
        }).then(({ data }) => {
          this.tableDataLoading = false;
          let returnData = data.data;
          this.tableData = returnData;
          this.totalnum = returnData.length;
        });
      }
    },
    // 批量转账
    transferClcik(id) {
      let _this = this;
      var ids = id
        ? [id]
        : this.checkBoxData.map((item) => {
            return item.id;
          });
      for (var i in ids) {
        _this
          .$http({
            url: _this.$http.adornUrl2(`/cash/update/${ids[i]}`),
            method: "post",
            data: _this.$http.adornData({}),
          })
          .then(({ data }) => {
            if (data.status == 0) {
              _this.$notify({
                title: "提示",
                duration: 1800,
                message: data.data,
                type: "warning",
              });
              return;
            } else {
              _this.$notify({
                title: "提示",
                duration: 1800,
                message: data.msg,
                type: "error",
              });
              return;
            }
          });
      }
    },
    handleSizeChange(val) {
      this.size = val;
      this.dataSelect();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dataSelect();
    },
    // 获取数据列表
    dataSelect() {
      this.tableDataLoading = true;
      this.$http({
        // /cash/alipay/{cashId}
        url: this.$http.adornUrl2(`/cash/page/${this.page - 1}/${this.size}/2`),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        this.tableDataLoading = false;
        let returnData = data.data;
        this.tableData = returnData.content;
        this.totalnum = returnData.totalElements;
      });
    },
  },
  mounted() {
    this.dataSelect();
  },
};
</script>

<style lang="scss" scoped>
</style>
